<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 设置link 、visited 、hover 、active 动态伪类的时候，
        必须按照link 、visited 、hover 、active 的顺序对操作对象进行设置。 */

        /* 未访问链接 */
        a:link {
            color: black;
        }

        /* 访问之后：（visited） */
        a:visited {
            color: brown;
        }

        /* 悬浮：（hover） */
        a:hover {
            color: yellowgreen;
        }

        /* 单机不松：（active） */
        a:active {
            color: gold;
        }

        div {
            width: 200px;
            height: 200px;
            border-radius: 10%;
            background-color: aquamarine;
        }

        div:hover {
            background-color: lightcoral;
            border-radius: 30%;
        }

        input[type="text"]:focus {
            line-height: 30px;
            background-color: lightcyan;
        }
    </style>
</head>

<body>
    <!-- ??? -->
    <a href="http://www.baidu.com">按钮---1</a><br>
    <a href="#">按钮---2</a><br>
    <a href="#">按钮---3</a><br>
    <a href="#">按钮---4</a><br>
    <div></div>
    <input type="text" placeholder="请输入：">
</body>

</html>